<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<c:if test="${empty pass}">
    <c:redirect url="audio_manager"></c:redirect>
</c:if>
<script type="text/javascript" src = "rsrc/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src = "rsrc/js/jquery.validationEngine.js"></script>

<script>
    $(document).ready(function(){
        $('#audio_form').validationEngine('attach');
        $('#cancelAudioForm').click(function(){           
           $('#audio_form').validationEngine('hideAll');
           $('#audio_form').validationEngine('detach');
        });
    });
</script>
<div class="separator"></div>
<div id="audio_part">
    <c:if test="${!empty audio}" >
        <p class="page_label">Add New Audio</p>
    </c:if>
    <c:if test="${empty audio}" >
        <p class="page_label">Add New Audio</p>
    </c:if>
  
    <form id="audio_form" action="add_audio_action" method="post" >
        <table id="audio_form_table">
            <tr>
                <td class="label" align="left">Audio Title</td>
                <td align="left"><input type='text' <c:if test="${!empty audio}"> value="${audio.title}" </c:if> name='audioTitle' id='audioTitle' class="validate[required,custom[onlyLetterSp]] input_text" title=""/>*</td>
            </tr>                    
            <tr>
                <td class="label" align="left">Length:</td>
                <td align="left"><input type='text' <c:if test="${!empty audio}"> value="${audio.length}" </c:if> name='length' id='length' class="validate[required,custom[onlyNumberSp]] input_text" title=""/>*</td>
            </tr>
            <tr>
                <td class="label" align="left">Recording Artist:</td>
                <td align="left"><input type='text' <c:if test="${!empty audio}"> value="${audio.recordingartist}" </c:if> name='recordingArtist' id='recordingArtist' class="validate[required,custom[onlyLetterSp]] input_text" title=""/>*</td>
            </tr>
            <tr>
                <td class="label" align="left">Producer:</td>
                <td align="left"><input type='text' <c:if test="${!empty audio}"> value="${audio.producer}" </c:if> name='producer' id='producer' class="validate[required,custom[onlyLetterSp]] input_text" title=""/>*</td>
            </tr>
            <tr>
                <td class="label" align="left">Genre:</td>
                <td align="left"><input type='text' <c:if test="${!empty genre}"> value="${audio.genre}" </c:if> name='genre' id='genre' class="validate[required,custom[onlyLetterSp]] input_text" title=""/>*</td>
            </tr>
            <tr>
                <td class="label" align="left">Label:</td>
                <td align="left"><input type='text' <c:if test="${!empty label}"> value="${audio.label}" </c:if> name='audioLabel' id='audioLabel' class="validate[required,custom[onlyLetterSp]] input_text" title=""/>*</td>
            </tr>
            
            <tr>
                <td class="label" align="left">Price:</td>
                <td align="left"><input type='text' <c:if test="${!empty audio}"> value="${audio.price}" </c:if> name='audioPrice' id = 'audioPrice' class="validate[required,custom[number]] input_text" title=""/>*</td>
            </tr>
            <tr>
                <td class="label" align="left">Synopsis</td>
                <td align="left"><textarea cols="45" rows="5" name="synopsis" id="synopsis" class="validate[required] input_text" title=""><c:if test="${!empty audio}"> ${audio.synopsis} </c:if></textarea>*</td>
            </tr>
            <tr>
                <td align="left"></td><td align = "left"><input id='formAudioButton' type='submit' class='gb' value='Submit' name='formAudioButton' /><input id='cancelAudioForm' type='button' class='gb' value='Cancel' name='cancelAudioForm' /></td>
            </tr>            
        </table>
        <span class="label">Fields with * are required</span>
        <c:if test="${!empty audio}"> <input type="hidden" name="a" id="a" value="${audio.productCrypt}"/> </c:if>
        <input type="hidden" name="formType" id="formType" value="${formType}"/>
    </form>
</div>